<template>
  <div class="home">
    <el-container>
      <el-header>Excel 合并转化</el-header>
      <el-main>
        <el-tabs v-model="activeName">
          <el-tab-pane label="项目集分类" name="first">
            <el-steps :active="activeCount" simple>
              <el-step
                title="步骤1：导入项目集"
                icon="el-icon-upload"
              ></el-step>
              <el-step
                title="步骤2：导入人员表"
                icon="el-icon-upload"
              ></el-step>
              <el-step
                title="步骤3：两表合并"
                icon="el-icon-copy-document"
              ></el-step>
            </el-steps>
            <template v-if="tableVisible === 'first'">
              <table-load
                :config="projectConfig"
                @next="handleNext"
              ></table-load>
            </template>
            <template v-else-if="tableVisible === 'second'">
              <table-load
                :config="partmentConfig"
                @next="handleNext"
              ></table-load>
            </template>
            <template v-else>
              <el-card class="table-card">
                <template #header>
                  <span>合成样式预览</span>
                </template>
                <cy-table :propList="propList"></cy-table>
                <el-button type="warning" @click="handleReUploadClick"
                  >重新上传</el-button
                >
                <el-button type="primary" @click="handleDownClick"
                  >下载文件</el-button
                >
              </el-card>
            </template>
          </el-tab-pane>
          <el-tab-pane label="部门分类" name="second">
            <table-load :config="partmentConfig"></table-load>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-dialog
      title="提示"
      v-model="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span>您已完成上传，请点击确认进行合并</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import TableLoad from '@/components/src/TableLoad.vue'
import CyTable from '@/components/src/Table.vue'
import { projectConfig } from './config/project.config'
import { partmentConfig } from './config/partment.config'
import { ITableColProp } from '@/components/types'

export default defineComponent({
  components: {
    TableLoad,
    CyTable
  },
  setup() {
    const activeName = ref('first')

    const activeCount = ref(0)

    type visible = 'first' | 'second' | 'third'
    const tableVisible = ref<visible>('first')

    const dialogVisible = ref(false)

    const propList: ITableColProp[] = [
      {
        prop: '序号',
        label: '序号',
        minWidth: '40'
      },
      {
        prop: '姓名',
        label: '姓名',
        minWidth: '60'
      },
      {
        prop: '工号',
        label: '工号',
        minWidth: '60'
      },
      {
        prop: '专业线',
        label: '专业线',
        minWidth: '80'
      },
      {
        prop: '专业组',
        label: '专业组',
        minWidth: '80'
      }
    ]

    const handleNext = () => {
      if (activeCount.value < 2) {
        if (activeCount.value === 0) {
          tableVisible.value = 'second'
        } else if (activeCount.value === 1) {
          tableVisible.value = 'third'
          dialogVisible.value = true
        }
        activeCount.value = activeCount.value + 1
      }
    }

    const handleDownClick = () => {
      console.log('btn --- click')
    }

    const handleReUploadClick = () => {
      tableVisible.value = 'first'
      activeCount.value = 0
    }

    return {
      activeName,
      projectConfig,
      partmentConfig,
      activeCount,
      handleNext,
      tableVisible,
      handleDownClick,
      handleReUploadClick,
      dialogVisible,
      propList
    }
  }
})
</script>

<style scoped lang="less">
.home {
  width: 80%;
  margin-top: 60px;
  .el-header {
    background: linear-gradient(340.16deg, #c92e9d -14.31%, #67209e 80.15%),
      #67209e;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);
    text-align: center;
    // line-height: 160px;
    .table-load {
      margin-top: 10px;
    }
    .table-card {
      min-height: 400px;
      background-color: #e9eef3;
      .el-button {
        margin-top: 10px;
      }
    }
  }
}
</style>
